<template>
    <div>
        <ul class="mui-table-view">
            <li class="mui-table-view-cell mui-hidden">
                cared
                <div id="M_Toggle" class="mui-switch mui-active">
                    <div class="mui-switch-handle"></div>
                </div>
            </li>
            <li class="mui-table-view-cell mui-media">
                <a href="#">
                    <img
                        class="mui-media-object mui-pull-left"
                        src="https://portrait.gitee.com/uploads/avatars/user/136/410355_xchao_1578923025.png!avatar200"
                    />
                    <div class="mui-media-body">
                        <h1>幸福</h1>
                        <p class="mui-ellipsis">
                            <span>时间：2022:1:3 12:12:12</span>
                            <span>点击数：20次</span>
                        </p>
                    </div>
                </a>
            </li>
            <li class="mui-table-view-cell mui-media">
                <a href="#">
                    <img
                        class="mui-media-object mui-pull-left"
                        src="https://portrait.gitee.com/uploads/avatars/user/136/410355_xchao_1578923025.png!avatar200"
                    />
                    <div class="mui-media-body">
                        <h1>幸福</h1>
                        <p class="mui-ellipsis">
                            <span>时间：2022:1:3 12:12:12</span>
                            <span>点击数：20次</span>
                        </p>
                    </div>
                </a>
            </li>
            <li class="mui-table-view-cell mui-media">
                <a href="#">
                    <img
                        class="mui-media-object mui-pull-left"
                        src="https://portrait.gitee.com/uploads/avatars/user/136/410355_xchao_1578923025.png!avatar200"
                    />
                    <div class="mui-media-body">
                        <h1>幸福</h1>
                        <p class="mui-ellipsis">
                            <span>时间：2022:1:3 12:12:12</span>
                            <span>点击数：20次</span>
                        </p>
                    </div>
                </a>
            </li>
            <li class="mui-table-view-cell mui-media">
                <a href="#">
                    <img
                        class="mui-media-object mui-pull-left"
                        src="https://portrait.gitee.com/uploads/avatars/user/136/410355_xchao_1578923025.png!avatar200"
                    />
                    <div class="mui-media-body">
                        <h1>幸福</h1>
                        <p class="mui-ellipsis">
                            <span>时间：2022:1:3 12:12:12</span>
                            <span>点击数：20次</span>
                        </p>
                    </div>
                </a>
            </li>
            <li class="mui-table-view-cell mui-media" v-for="item in testlist" :key="item.id">
                <a href="#">
                    <img
                        class="mui-media-object mui-pull-left"
                        :src="item.img"
                    />
                    <div class="mui-media-body">
                        <h1>{{item.name}}</h1>
                        <p class="mui-ellipsis">
                            <span>时间：2022:1:3 12:12:12</span>
                            <span>点击数：20次</span>
                        </p>
                    </div>
                </a>
            </li>
        </ul>
    </div>
</template>
<script>
export default {
    data() {
        return {
            testlist:[
                {id:1,name:'电水壶',price:98,num:100,img:require("../assets/good/11.jpg")},
                {id:2,name:'手表',price:98,num:100,img:require("../assets/good/12.jpg")},
                {id:3,name:'书包',price:98,num:100,img:require("../assets/good/13.jpg")},
                {id:4,name:'手机',price:98,num:100,img:require("../assets/good/14.jpg")},
                {id:5,name:'煎锅',price:98,num:100,img:require("../assets/good/15.jpg")},
                {id:6,name:'电脑',price:98,num:100,img:require("../assets/good/16.jpg")},
                {id:7,name:'衣服',price:98,num:100,img:require("../assets/good/17.jpg")},
                {id:8,name:'女包',price:98,num:100,img:require("../assets/good/18.jpg")},
                {id:9,name:'电磁炉',price:98,num:100,img:require("../assets/good/19.jpg")}, 
                {id:10,name:'手表',price:98,num:100,img:require("../assets/good/20.jpg")}        
            ],
            newslist: []//定义空数据
        };

    },
    created(){
      this.getNewsList();  
    },
    methods: {
       
    }

};
</script>
<style lang="scss" scoped>
.mui-table-view {
    li {
        h1 {
            font-size: 14px;
        }
    }
}
.mui-ellipsis {
    font-size: 12px;
    color: #226aff;
    display: flex;
    justify-content: space-between;
}
</style>